<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            width: 100px;
            height: 100px;
            background: skyblue;
            cursor: pointer;
            position: absolute;
        }
        #div2{
            width: 100px;
            height: 100px;
            background: pink;
            cursor: pointer;
            position: absolute;
           left: 20px;
        }

    </style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>

  <script src="js/drag.js"></script>

<script>
    window.onload = function () {
        new Drag('div1');
        new LimitDrag('div2');
    };

    function LimitDrag(id) {
          Drag.call(this,id);
      }
      for(var i in Drag.prototype){
          LimitDrag.prototype[i] = Drag.prototype[i]
      }

      LimitDrag.prototype.fnMove = function (ev) {

          var oEvent = ev||event;

           var l = oEvent.clientX - this.disX;
           var t = oEvent.clientY - this.disY;



           if(l<0){
               l=0
           }
           else if(l>document.documentElement.clientWidth-this.oDiv.offsetWidth){
               l=document.documentElement.clientWidth-this.oDiv.offsetWidth
           }
          this.oDiv.style.left = l+'px';
          this.oDiv.style.top = t+'px';

      }




  </script>
</body>
</html>